materialmenu

jQuery plugin that creates an responsive Menu on website.

Try IT!

http://requtize.github.io/materialmenu/

For downloads, see: https://github.com/requtize/materialmenu/releases/

Required

What you need, to work with materialmenu?

• jQuery 1.9+

License

This code is licensed under MIT License.

How to use?

$(function(){
  // Basic usage
  $('.material-menu nav > ul').materialmenu();

  // Full Usage (with comments)
  $(".material-menu nav > ul").materialmenu({
    /**
     * Define width of the window (in pixels) where starts mobile devices.
     * @type integer
     */
    mobileWidth: 768,
    /**
     * Width of the wrapper of menu. Works only on mbile.
     * @type integer
     */
    width: 250,
    /**
     * Time of animation.
     * @type integer
     */
    animationTime: 200,
    /**
     * Overlay opacity.
     * @type integer
     */
    overlayOpacity: 0.4,
    /**
     * Class of menu button that fires showing of menu.
     * @type string
     */
    buttonClass: 'material-menu-button',
    /**
     * If you want, you can define Your own menu button,
     * that be appended to generated title.
     * @type string
     */
    buttonHTML: '<div class="material-menu-button"><span></span><span></span><span></span></div>',
    /**
     * Page title, showed on mobile devices.
     * @type string
     */
    title: '',
    /**
     * Tells if title can be showed on mobile devices (only).
     * @type boolean
     */
    showTitle: false,
    /**
     * Number of pixels to scroll top, when title is showed on mobile devices.
     * If is 0, title will always be visible on top.
     * @type integer
     */
    titleShowOn: 40,
    /**
     * If true, menu will hide when user click on some menu item.
     * @type boolean
     */
    hideOnClick: true,
    /**
     * Fires when menu is opened.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onOpen: function(element) {},
    /**
     * Fires when menu is closed.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onClose: function(element) {},
    /**
     * Fires when window width is chenged from desktop to mobile.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onChangeMobile: function(element) {
      element.parent().parent().addClass('vertical');
    },
    /**
     * Fires when window width is chenged from mobile to desktop.
     * @param  jQuery object element Menu (ul) object.
     * @return void
     */
    onChangeDesktop: function(element) {
      element.parent().parent().removeClass('vertical');
    },
    /**
     * Fires when title-bar is opened.
     * @param  jQuery object element Title-bar object.
     * @return void
     */
    onShowTitlebar: function(element) {},
    /**
     * Fires when title-bar is closed.
     * @param  jQuery object element Title-bar object.
     * @return void
     */
    onHideTitlebar: function(element) {}
  });
});